<!DOCTYPE html>
<html>

<head>
    <title>DIY主机配置清单管理器 V | 新建配置清单</title>
    <link rel="icon" href="img/totem.png" type="image/x-icon">
    <link rel="shortcut icon" href="img/totem.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="css/new.css">
    <script src="js/info.js"></script>
</head>

<body>
    <input type="text" id="listName" placeholder="请填写配置清单名称" class="listName" value="新配置清单" maxlength="50">
    <a class="back-link" href="/">返回</a>

    <table id="AccessoriesTable">
        <thead>
            <tr>
                <th style="width: 130px;">配件</th>
                <th>型号</th>
                <th style="width: 100px;">单价</th>
                <th style="width: 100px;">数量</th>
                <th style="width: 162px;">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" required oninput="updateJson()"></td>
                <td><input type="text" required oninput="updateJson()"></td>
                <td><input type="number" min="0" required value="0" oninput="updateJson()"></td>
                <td><input type="number" min="0" required value="0" oninput="updateJson()"></td>
                <td>
                    <button onclick="moveUp(this)">上移</button>
                    <button onclick="moveDown(this)">下移</button>
                    <button onclick="removeAccessoriesItem(this)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="button-container" style="margin-bottom: 50px;" id="buttonContainer">
        <label for="totalPrice">总价格：</label>
        <span id="totalPrice">0.00元</span>
        <button onclick="importList()" class="ant-btn">导入配置</button>
        <button onclick="addAccessoriesItem()" class="ant-btn">添加配件</button>
        <button onclick="saveList()" id="saveButton" class="ant-btn">保存新配置清单</button>
        <button onclick="forceSaveList()" class="delete-btn" id="forceSaveButton" style="display: none;">强制保存</button>
        <button onclick="clearPage()" class="delete-btn">清空</button>
        <button onclick="toggleJsonVisibility()" class="ant-btn" id="jsonVisibilityButton">显示JSON</button>
    </div>
    <input type="file" id="fileInput" style="display: none" accept=".json" onchange="handleFileInput(event)">
    <div id="errorMessage" style="display: none;" class="error-message"></div>
    <textarea id="jsonOutput" class="hide" readonly></textarea>

    <div class="footer">
        <a href="https://gitee.com/karasukaigan" target="_blank">© 鸦无量</a>
    </div>

    <script src="js/new.js"></script>
</body>

</html>